<template>

	<view>
		
		<view  >
			<!-- 轮播图 -->
			<u-swiper :list="slidesList" name="img_url" height="350rpx"></u-swiper>
			<!-- 排序列表 -->
			<u-tabs class="u-text-center"  :list="sortList" :current="currentIndex" @change="sortChange" ></u-tabs>
			<!-- 商品 列表-->
			<u-row gutter="36rpx" class="u-skeleton">
				<u-col span="6" v-for="goods in goodsList.length != 0 ? goodsList : [{},{},{},{},{},{}]" >
					<goods-card :goods="goods" :loading="loading"></goods-card>
				</u-col>
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
			</u-row>
			
		</view>
		
		
		
	
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				//轮播图列表
				slidesList:[],
				//商品列表
				goodsList:[],
				//排序列表
				sortList:[
					{name:"默认"},
					{name:"热销"},
					{name:"推荐"},
					{name:"最新"}
				],
				currentIndex:0,
				pageIndex:1,
				loading:false
			}
		},
		onReachBottom() {
			//到底部请求数据
			this.pageIndex = this.pageIndex + 1
			this.requestIndex()
		},
		onLoad() {
			//第一次请求数据
			this.requestIndex()
		},
		methods: {
			
			async requestIndex(){
				//显示骨架图
				this.loading = true
				const params = {
					page:this.pageIndex
				}
				switch(this.currentIndex){
					case 1:
						params.sales = 1
						break;
					case 2:
						params.recommend = 1
						break;
					case 3:
						params.new = 1
						break;
				}
				
				const indexData = await this.$u.api.getIndexData(params)
				//关闭骨架图
				this.loading = false
				//填充轮播图列表
				this.slidesList = indexData.slides
				//填充商品列表
				this.goodsList = [...this.goodsList,...indexData.goods.data]
				
				
				
			},
			sortChange(index){
				this.currentIndex = index
				//清空数据
				this.goodsList = []
				this.pageIndex = 1
				//请求sort数据
				this.requestIndex()
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
